@include('Admin.public.head')
<style>
    .am-btn-toolbar
    {
        margin-top: 5px;
    }
    #credit2_see a
    {
        background: #e4a25e;
        border: 1px solid #e4a25e;
    }
    #my-popups_credit2
    {
        overflow: auto;
    }
	#my-popups000
	{
	    overflow: auto;
	}
    #my-popup2000 {
        max-height: 490px;}
/* .am-dimmer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1100;
    opacity: 0;
}
.am-dimmer.am-active {
    opacity: 1;
    display:none !important;
} */
</style>
<body>
@include('Admin.public.menu')
<!-- 引入样式 -->
<div class=" admin-content" id="app">
    <div class="daohang">

    </div>
    <!--详情-->
    <div class="am-popup am-popup-inner" id="my-popup">
        <div class="am-popup-hd" style="background:#5eb95e">
            <h4 class="am-popup-title">修改</h4>
            <div class="am-popup-bd" style="max-height:320px;">
            <form class="am-form tjlanmu">
                    <div class="am-form-group am-cf">
                        <div class="zuo">分红总金额：</div>
                        <div class="you">
                            <input type="text" v-on:blur="editTotal()" v-model="total_amount" class="am-form-field" placeholder="请输入分红总金额">
                        </div>
                    </div>
                    <div class="am-form-group am-cf">
                        <div class="zuo">分红总人数：</div>
                        <div class="you">
                            <input type="text" disabled="disabled" v-model="user_num" class="am-form-field" placeholder="请输入分红总人数">
                        </div>
                    </div>
                    <div class="am-form-group am-cf">
                        <div class="zuo">总份额：</div>
                        <div class="you">
                            <input type="text" disabled="disabled" v-model="number" class="am-form-field" placeholder="请输入总份额">
                        </div>
                    </div>
                    <div class="am-form-group am-cf">
                        <div class="zuo">单份份额：</div>
                        <div class="you">
                            <input type="text" disabled="disabled" v-model="single" class="am-form-field" placeholder="请输入单份份额">
                        </div>
                    </div>
                <div class="am-form-group am-cf">
                    <div class="zuo">分红备注：</div>
                    <div class="you">
                        <input type="text"  v-model="remark" class="am-form-field" placeholder="请输入分红分红备注">
                    </div>
                </div>

                <div class="am-form-group am-cf">
                    <div class="you">
                        <p>
                            <button type="button" v-on:click="editmoney()"
                                    class="am-btn am-btn-success am-radius">立即修改
                            </button>
                            <!-- <button closeOnConfirm class="am-btn am-btn-success am-radius">取消</button> -->
                        </p>
                    </div>
                </div>
                </form>
            </div>
            <span data-am-modal-close class="am-close">&times;</span></div>
    </div>


    
    <div class="am-modal am-modal-no-btn" tabindex="0" id="my-popups_credit2">
        <div class="am-modal-dialog" style="overflow: auto;">
            <div class="am-modal-hd">分红
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>

            <div>您正在操作分红</div>
            <div class="am-form-group am-cf" style="margin-top:40px">
                    <div class="you">
                        <p>
                            <button type="button" v-on:click="confirmRed()"
                                    class="am-btn am-btn-success am-radius">确定
                            </button>
                            <button type="button" v-on:click="cancelRed()" class="am-btn am-btn-success am-radius">取消</button>
                        </p>
                    </div>
                </div>

        </div>
    </div>


    <div class="admin-biaogelist">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-yen">分红记录</ul>
            <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">交易明细</a></dl>
            <!--这里打开的是新页面-->
        </div>
        <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
            <ul>
                <li>
                    <template>
                        <el-select v-model="keyword.type" placeholder="分红类型">
                            <el-option
                                    size="medium"
                                    v-for="val,index in options"
                                    :key="index"
                                    :label="val.label"
                                    :value="val.value">
                            </el-option>
                        </el-select>
                    </template>
                </li>

                <li>
                    <div class="block">
                        <el-date-picker
                                v-model="keyword.time"
                                type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </li>

                <li>
                    <el-input v-model="keyword.keyword" class="keywords" placeholder="关键词搜索"></el-input>
                </li>
                <li>
                    <el-button type="primary" v-on:click="changeClick()">搜索</el-button>
                </li>
                {{--<li> <el-button type="success" ><a href="/admin/members/exportUser">导出</a></el-button></li>--}}
                <li> <el-button type="success" v-on:click="exportDetail()">导出</el-button></li>
                <li> <el-button type="danger" v-on:click="resetOrder()">重置</el-button></li>
            </ul>
        </div>

        <form class="am-form am-g">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                <thead>
                <tr class="am-success">
                    <th class="table-type">ID</th>
                    <th class="table-type">分红编号</th>
                    <th class="table-type">分红总金额</th>
                    <th class="table-type">分红总人数</th>
                    <th class="table-title">总份额</th>
                    <th class="table-title">单份份额</th>
                    <th class="table-title">分红类型</th>
                    <th class="table-title">分红状态</th>
                    <th class="table-title">操作员</th>
                    <th class="table-title">备注</th>
                    <th class="table-title">添加时间</th>
                    <th class="table-title">修改时间</th>
                    <th class="table-title">分红时间</th>
                    <th class="table-title">操作</th>


                </tr>
                </thead>
                <tbody>
                <tr v-for="val,index in Transaction">
                    <td>@{{ val.id }}</td>
                    <td>@{{ val.bonus_sn }}</td>
                    <td>@{{ val.total_amount }}</td>
                    <td>@{{ val.user_num }}</td>
                    <td>@{{ val.number }}</td>
                    <td>@{{ val.single }}</td>
                    <td>
                        <span v-show="val.type == 1">消费分红</span>
                        <span v-show="val.type == 2">团队业绩分红</span>

                    </td>
                    <td>
                        <span v-show="val.status == 0">未分红</span>
                        <span v-show="val.status == 1">已分红</span>

                    </td>
                    <td>@{{ val.verifier }}</td>
                    <td>@{{ val.remark }}</td>
                    <td>@{{ val.created_at }}</td>
                    <td>@{{ val.updated_at }}</td>
                    <td>@{{ val.updated_at }}</td>
                    <td style="display: flex;">
                    <div class="am-btn-toolbar" v-if="val.status == 1">
                            <div class="am-btn-group am-btn-group-xs">
                                    <a v-on:click="edit1(val.id)"
                                       class="am-btn am-btn-secondary am-btn-group am-btn-group-xs">
                                        <span class="am-icon-search" title="修改">修改</span>
                                    </a>
{{--                                <div class="am-btn-group am-btn-group-xs">--}}
                                    <a v-on:click="sendRed1(val.id)"
                                       class="am-btn am-btn-secondary ">
                                        <span class="am-icon-search" title="分红">分红</span>
                                    </a>
{{--                                </div>--}}
                            </div>

                     </div>
                    <div class="am-btn-toolbar" v-if="val.status != 1">
                            <div class="am-btn-group am-btn-group-xs">
                                    <a v-on:click="edit(val.id)" data-am-modal="{target: '#my-popup',width:1000,height: 1000}"
                                       class="am-btn am-btn-success am-btn-group am-btn-group-xs">
                                        <span class="am-icon-search" title="修改">修改</span>
                                    </a>
                                <a v-on:click="sendRed(val.id)"  data-am-modal="{target: '#my-popups_credit2',height: 200}"
                                   class="am-btn am-btn-danger">
                                    <span class="am-icon-search" title="分红">分红</span>
                                </a>
                            </div>
{{--                            <div class="am-btn-group am-btn-group-xs">--}}
{{--                                <a v-on:click="sendRed(val.id)"  data-am-modal="{target: '#my-popups_credit2',height: 200}"--}}
{{--                                   class="am-btn am-btn-danger">--}}
{{--                                    <span class="am-icon-search" title="分红">分红</span>--}}
{{--                                </a>--}}
{{--                            </div>--}}
                     </div>
                     <!-- <div class="am-btn-toolbar" id="credit2_see" v-if="val.status == 1">
                                <div class="am-btn-group am-btn-group-xs">
                                    <a v-on:click="sendRed1(val.id)"
                                       class="am-btn am-btn-secondary ">
                                        <span class="am-icon-search" title="分红">分红</span>
                                    </a>
                                </div>
                    </div>
                    <div class="am-btn-toolbar" id="credit2_see" v-if="val.status != 1">
                                <div class="am-btn-group am-btn-group-xs">
                                    <a v-on:click="sendRed(val.id)"  data-am-modal="{target: '#my-popups_credit2',height: 200}"
                                       class="am-btn am-btn-danger">
                                        <span class="am-icon-search" title="分红">分红</span>
                                    </a>
                                </div>
                    </div> -->
                    </td>


                </tr>
                </tbody>
            </table>
            <!--分页-->
            <ul class="am-pagination am-fr">
                <div class="block">
                    <el-pagination
                            background
                            :page-size="PagesData.per_page"
                            :current-page = "PagesData.current_page"
                            layout="total , prev, pager, next"
                            :total="PagesData.total"
                            @prev-click="changeClick"
                            @next-click="changeClick"
                            @current-change="changeClick">
                        >
                    </el-pagination>
                </div>
            </ul>

    <!-- <div class="am-modal am-modal-no-btn" tabindex="-1" id="my-popup">
        <div class="am-modal-dialog" style="overflow: auto;">
                <form class="am-form tjlanmu">
                    <div class="am-form-group am-cf">
                        <div class="zuo">姓名：</div>
                        <div class="you">
                            <input type="text" class="am-form-field" placeholder="请输入姓名">
                        </div>
                    </div>
                </form>
        </div>
    </div> -->




        </form>

        <script type="text/javascript">

        </script>
        <script>
            var app = new Vue({
                el:"#app",
                data: {
                    id:'',
                    total_amount:'',
                    user_num:'',
                    number:'',
                    single:'',
                    bonus_sn:'',
                    remark:'',
                    options: [{
                        value: 1,
                        label: '消费分红 '
                    },
					{
                        value: 2,
                        label: '团队业绩 '
                    }],

                    pickerOptions2: {
                        shortcuts: [{
                            text: '最近一周',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近一个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                    },
                    Transaction : [],//交易列表
                    PagesData:[],//分页
                    pase:'',
                    keyword:{ //关键字搜索
                        type:'',
                        time:'',
                        keyword:'',
                    },
                    orderSum:'',//订单
                    withdrawSum:'',//提现
					activeSum:'',
					joinSum:'',
					returnSum:'',
					shareSum:'',
					rechargeSum:''
                },
                //事件
                methods: {
                    //选择当前页
                    changeClick:function(e){
                        var rico = this
                        $.get("/admin/finance/doTransaction",{'_token':'{{csrf_token()}}',class:'bonusList',page:e,keyword:app.keyword},function (res) {
                            if(res.code){
                                app.Transaction = res.data.data;
                                app.PagesData = res.data;
                                app.orderSum = res.orderSum;//订单
                                app.withdrawSum= res.withdrawSum;//提现
								app.activeSum= res.activeSum;
								app.joinSum= res.joinSum;
								app.returnSum= res.returnSum;
								app.shareSum= res.shareSum;
								app.rechargeSum= res.rechargeSum;
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },

                    initialize:function () {
                        var rico = this
                        //用户列表
                        $.get("/admin/finance/doTransaction",{'_token':'{{csrf_token()}}',class:'bonusList'},function (res) {
                            if(res.code){
                                app.Transaction = res.data.data;
                                app.PagesData = res.data;
                                    app.orderSum = res.orderSum;//订单
                                    app.withdrawSum= res.withdrawSum;//提现
                                    app.activeSum= res.activeSum;
                                    app.joinSum= res.joinSum;
                                    app.returnSum= res.returnSum;
                                    app.shareSum= res.shareSum;
                                    app.rechargeSum= res.rechargeSum;
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    //重置
                    resetOrder:function(){
                        location.reload();
                    },
                    editTotal:function(){
                        $.post("/admin/finance/bonusList",{'_token':'{{csrf_token()}}',class:'edit',id:app.id,money:app.total_amount,submit:0,remark:app.remark},function (res) {
                            // app.total_amount = res.total_amount
                            app.user_num = res.count
                            app.number = res.total_num
                            app.single = res.pre
                            app.remark = res.remark
                        })
                    },
                    edit:function(id){
                        console.log(id);
                        app.id = id;
                        $.post("/admin/finance/bonusList",{'_token':'{{csrf_token()}}',class:'find',id:id},function (res) {
                            app.total_amount = res.data.total_amount
                            app.user_num = res.data.user_num
                            app.number = res.data.number
                            app.single = res.data.single
                            app.bonus_sn = res.data.bonus_sn
                            app.remark = res.data.remark
                        })
                    },
                    edit1:function(id){
                        layer.msg('该分红已发放，无法再次分红')
                    },
                    sendRed(id){
                        app.id = id;
                    },
                    sendRed1(id){
                        layer.msg('该分红已发放，无法再次分红')
                    },
                    confirmRed(){
                        CloseWin();
                        $.post("/admin/finance/bonusList",{'_token':'{{csrf_token()}}',class:'submit',id:app.id},function (res) {
                            // app.total_amount = res.data.total_amount
                            // app.user_num = res.data.user_num
                            // app.number = res.data.number
                            // app.single = res.data.single
                            layer.msg(res.data)
                            setTimeout(() => {
                                location.href="/admin/finance/bonus"
                            }, 1500);
                            
                        })
                    },
                    cancelRed(){
                        location.href="/admin/finance/bonus"
                    },
                    editmoney(){
                        console.log(app.id)
                        $.post("/admin/finance/bonusList",{'_token':'{{csrf_token()}}',class:'edit',id:app.id,money:app.total_amount,submit:1,bonus_sn:app.bonus_sn,remark:app.remark},function (res) {
                            // app.total_amount = res.data.total_amount
                            // app.user_num = res.data.user_num
                            // app.number = res.data.number
                            // app.single = res.data.single
                            layer.msg(res.data)
                            setTimeout(() => {
                                location.href="/admin/finance/bonus"
                            }, 1500);
                            
                        })
                    },
                    //导出
                    exportDetail:function () {
                        location.href="/admin/finance/exportDetail?type="+app.keyword.type+'&time='+app.keyword.time+'&keyword='+app.keyword.keyword+'&ClickType=7';
                    }

                },

                //自动执行
                mounted: function () {
                    this.initialize();
                },
            })
            //关闭页面
            function CloseWin(){
                parent.location.reload(); // 父页面刷新
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            }
        </script>


@include('Admin.public.foot')